const searchForm = document.querySelector('.search');
const searchInput = document.getElementById('q');

// functie om oude highlights weg te halen
function removeHighlights() {
  document.querySelectorAll('.highlight').forEach(span => {
    span.replaceWith(span.textContent); // vervang span door originele tekst
  });
}

searchForm.addEventListener('submit', function(e) {
  e.preventDefault();
  const query = searchInput.value.trim();
  if (!query) return;

  // 1. Eerst alle oude highlights verwijderen
  removeHighlights();

  // regex om alleen dat woord te vinden (hoofdletterongevoelig)
  const regex = new RegExp(`(${query})`, 'gi');

  // Variabele om de eerste gevonden highlight op te slaan
  let firstHighlight = null; 
  let found = false;

  // loop door alle tekst-elementen
  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);

  while (walker.nextNode()) {
    const node = walker.currentNode;
    
    // Controleer of de node in een element zit dat we willen uitsluiten, zoals <script> of <style>
    if (node.parentNode && (node.parentNode.nodeName === 'SCRIPT' || node.parentNode.nodeName === 'STYLE')) {
        continue;
    }
    
    if (regex.test(node.textContent)) {
      found = true;
      
      // Maak de nieuwe HTML met de highlight <span>
      const spanWrap = node.textContent.replace(regex, '<span class="highlight">$1</span>');
      
      // Creëer een tijdelijke container om de nieuwe nodes vast te houden
      const temp = document.createElement('span');
      temp.innerHTML = spanWrap;
      
      // Als dit de eerste keer is dat we een highlight maken, bewaar de referentie
      if (!firstHighlight) {
          // Zoek de eerste highlight span die we net hebben gemaakt
          firstHighlight = temp.querySelector('.highlight');
      }
      
      // Vervang de originele tekst-node door de nieuwe nodes (met en zonder highlight spans)
      node.replaceWith(...temp.childNodes);
    }
  }

  // 2. Na het highlighten, scrollen naar het eerste gevonden woord
  if (firstHighlight) {
    // Gebruik scrollIntoView om naar het element te scrollen
    firstHighlight.scrollIntoView({
      behavior: 'smooth', // Voor een vloeiende animatie
      block: 'center'    // Centreert het element in het midden van het scherm
    });
  } else if (!found) {
    alert("Geen resultaten gevonden voor: " + query);
  }
});

// simpele highlight-stijl
const style = document.createElement('style');
style.textContent = `
  .highlight {
    background-color: yellow;
    font-weight: bold;
    // Voeg padding toe zodat het woord niet tegen de rand zit na het scrollen
    padding: 2px 0; 
  }
`;
document.head.appendChild(style);